<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单元素</title>
		<meta name="description" content="首都医科大学附属小学（原右安门第一小学），学校地处南二环，西邻丽泽商务区，东临北京南站，位于开阳里社区中心。" />
		<meta name="keywords" content="右安门一小 右安门 首都医科大学附属小学 北京 一小  右安门 和文化 教育" /><meta name="author" content="say"/>
		<link rel="shortcut icon" href="../static/images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="../static/font/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/student.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/theme-green.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/kui.css"/>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="../static/js/main.js" ></script>
		
	</head>
	<body>
		<div class="header-top-fixed">
			<div class="w1080">
				<ul class="top-navbar">
					<li><a href="#">门户网站</a></li>
					<li><a href="#">德育信息</a></li>
					<li><a href="#">七彩少年</a></li>
					<li><a href="#">和雅教师</a></li>
					<li><a href="#">微课学习</a></li>
					<li><a href="#">微探交流</a></li>
				</ul>
				<ul class="navbar-right">
					<li><a href="#">返回首页</a></li>
					<li><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
		<div class="header">
			<div class="user-div">
				<img src="../static/images/users.jpg"/>
			</div>
			<div class="header-con">
				<h2>首医附小学生空间</h2>
				<div class=" user-msg">
					<a href="#">
						<span id="">
							李彩优
						</span>
					</a>
					<div class="fenshu">
						<a href="#" class="jifen">
							<i></i>
							积分
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
						<a href="#" class="xunz">
							<i></i>
							勋章 
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
					</div>
					<div class="clear"></div>
					<div class="header-navbar">
						<ul>
							<li><a href="#">个人中心</a></li>
							<li><a href="#">个人空间</a></li>
							<li class="active"><a href="#">德育信息</a></li>
							<li><a href="#">微课学习</a></li>
							<li><a href="#">微探交流</a></li>
							<li><a href="#">艺术与鉴赏</a></li>
							<li><a href="#">社团活动</a></li>
							<li><a href="#">更多</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="point-div stu-d">
				<ul>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-bell"></i>
							<span id="">
								11
							</span>
						</a>
						<span id="">
							消息
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-commenting"></i>
							<span id="">
								23
							</span>
						</a>
						<span id="">
							评论
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-heart"></i>
						</a>
						<span id="">
							收藏
						</span>
					</li>
					<a href="#" class="exit" ><i class="fa fa-lg fa-power-off"></i>  退出</a>
				</ul>
			</div>
		</div>
		<div class="containter">
			<div class="sider">
				<div class="con-div sider-div">
					<div class="sider-top">
						德育信息
					</div>
					<div class="sider-con zhandian">
						<ul>
							<li><a href="#"><i class="icon icon-dangan "></i>查看德育细则</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课上评价</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课下评价</a></li>
							<li class="actived"><a href="#"><i class="icon icon-dangan "></i>我的评价记录</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content content-lg">
				<div class="main-div con-div">
					<div class="main-top">
						<ul class="tab-btn">
							<li class="top-seclect"> <a href="#">表单</a></li>
						</ul>
					</div>
					<div class="con-list">
						<div class="dynamic loglist">
							<h3 class="demo-title">表单形式</h3>
							<form action="form-group">
								<div class="form-item ">
									<div class=" form-liquid">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<div class="form-liquid-inline">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input" />
									</div>
									<div class="form-liquid-pro">
										提示语
									</div>
								</div>
								<div class="form-item">
									<div class=" form-liquid">
										<input type="password" name="" id="" placeholder="请输入密码" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<div class=" form-liquid">
										<input type="email" name="" id="" placeholder="请输入邮箱地址" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<div class=" form-liquid">
										<textarea name="" rows="3" cols="" placeholder="请输入文本内容" class="kui-textarea"></textarea>
									</div>
								</div>
								<div class="form-item">
									<div class=" form-liquid">
										<select name="" class="kui-select">
											<option value="">请选择一种体育运动</option>
											<option value="">篮球</option>
											<option value="">足球</option>
											<option value="">体操</option>
											<option value="">短跑</option>
										</select>
									</div>
								</div>
								<div class="form-item">
									<div class=" form-liquid">
										<input type="file" name="" id="" class="kui-input"/>
										<div class="kui-input-file">
											点击上传文件
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">表单类型</h3>
							<form action="form-group">
								<div class="form-item">
									<label for="" class="form-item-label">输入框</label>
									<div class="form-input-block">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">输入提示</label>
									<div class="form-input-inline">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input" />
									</div>
									<div class="form-input-pro">
										提示语
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">输入框</label>
									<div class="form-input-block">
										<input type="password" name="" id="" placeholder="请输入密码" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">电子邮箱</label>
									<div class="form-input-block">
										<input type="email" name="" id="" placeholder="请输入邮箱地址" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">文本框</label>
									<div class="form-input-block">
										<textarea name="" rows="3" cols="" placeholder="请输入文本内容" class="kui-textarea"></textarea>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">选择框</label>
									<div class="form-input-block">
										<select name="" class="kui-select">
											<option value="">请选择一种体育运动</option>
											<option value="">篮球</option>
											<option value="">足球</option>
											<option value="">体操</option>
											<option value="">短跑</option>
										</select>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">文件</label>
									<div class="form-input-block">
										<input type="file" name="" id="" class="kui-input"/>
									</div>
								</div>
							</form>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">表单状态</h3>
							<form action="form-group">
								<div class="form-item">
									<label for="" class="form-item-label">禁止输入</label>
									<div class="form-input-block">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input" disabled=""/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">只读文档</label>
									<div class="form-input-block">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input" readonly=""/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">自动激活</label>
									<div class="form-input-block">
										<input type="text" name="" id="" placeholder="请输入需填写内容" class="kui-input" autofocus=""/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">警示文档</label>
									<div class="form-input-block has-warning">
										<input type="text" name="" id="" placeholder="警示" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">错误文档</label>
									<div class="form-input-block has-error">
										<input type="text" name="" id="" placeholder="错误" class="kui-input"/>
									</div>
								</div>
								<div class="form-item">
									<label for="" class="form-item-label">正确文档</label>
									<div class="form-input-block has-success">
										<input type="text" name="" id="" placeholder="正确" class="kui-input"/>
									</div>
								</div>
							</form>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">表单大小</h3>
							<form action="form-group">
								<div class="form-item ">
									<div class=" form-liquid">
										<input type="text" name="" id="" placeholder="大尺寸输入框" class="kui-input input-lg"/>
									</div>
								</div>
								<div class="form-item ">
									<div class=" form-liquid">
										<input type="text" name="" id="" placeholder="普通输入框" class="kui-input"/>
									</div>
								</div>
								<div class="form-item ">
									<div class=" form-liquid">
										<input type="text" name="" id="" placeholder="小尺寸输入框" class="kui-input input-xs"/>
									</div>
								</div>
							</form>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">复选框和单选框（块级）</h3>
							<form action="form-group">
								<div class="form-item">
									<div class=" form-liquid">
										<div class="kui-checkbox">
											<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 1</label>
										</div>
										<div class="kui-checkbox">
											<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 2</label>
										</div>
										<div class="kui-checkbox">
											<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 3</label>
										</div>
									</div>
								</div>
							</form>
							<form action="form-group">
								<div class="form-item">
									<div class=" form-liquid">
										<div class="kui-radio">
											<label class="radio-label">
												<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked  class="radio-box"> 选项 1
											</label>
										</div>
										<div class="kui-radio">
											<label class="radio-label">
												<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" class="radio-box">选项 2 - 选择它将会取消选择选项 1
											</label>
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">复选框和单选框（行内）</h3>
							<form action="form-group">
								<div class="form-item">
									<div class="kui-checkbox kui-checkbox-inline">
										<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 1</label>
									</div>
									<div class="kui-checkbox kui-checkbox-inline">
										<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 2</label>
									</div>
									<div class="kui-checkbox kui-checkbox-inline">
										<label class="checkbox-label"><input type="checkbox" value="" class="checkbox-box">选项 3</label>
									</div>
								</div>
							</form>
							<form action="form-group">
								<div class="form-item">
									<div class="kui-radio kui-radio-inline">
										<label class="radio-label">
											<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked  class="radio-box"> 选项 1
										</label>
									</div>
									<div class="kui-radio kui-radio-inline">
										<label class="radio-label">
											<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked  class="radio-box"> 选项 2
										</label>
									</div>
									<div class="kui-radio kui-radio-inline">
										<label class="radio-label">
											<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" class="radio-box">选项 3 
										</label>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		<div class="clear"></div>
		</div>
		<div class="footer"> 
			<p>© 2015-2016 DHHC 版权所有</p>
		  	<p>版权号</p>
		</div>
		
	</body>
</html>
